iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0

元件中資料與事件的傳遞

  • 由於元件具有重複使用性,因此要使元件能夠在不同的應用中得到最大限度的重複使用與最少的內部改動,這就需要元件具有一定的靈活度,即可設定性。
  • 可設定性歸根結底是透過資料傳遞來實現的,在使用元件時,透過傳速不同的資料來使元件互動行為、著色樣式有略微的差異。

為元件新增外部屬性

  • 在使用原生的HTML標籤元素時,可透過屬性控制元素的一些著色行為,例如style屬性可以設定元素的樣式風格,class屬性用來設定元素的類別,等等。
  • 自定義元件的使用方式與原生HTML標籤一樣,也可以透過屬性控制其內部行為。
  • 在昨天的測試中,my-alert元件會在頁面中著色出一個按鈕元素,此按鈕的標題為字串「按鈕」,這個標題文案是寫死在template範本字串中的,因此無論我們建立出多少個my-alert元件,其著色出的按鈕標題都是一樣的。
  • 如果需要在使用此元件時靈活地設定其按鈕顯示的標題,就需要使用元件中的props設定。
  • props是propertys的縮寫,顧名思義為屬性,props定義的屬性是提供外部設定使用的,也可以將其稱為外部屬性。

上一篇
Day 16
下一篇
Day 18
系列文
從零開始學習TypeScript、Vue.js !!30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言